<!-- 纵向排列的班级卡片 -->
<script setup lang="ts">
defineProps<{
  picture: string
  title: string
  author: string
  createdAt: string
}>()
</script>

<template>
  <view class="w-340rpx overflow-hidden rounded-20rpx bg-white card-shadow" hover-class="bg-#F8FAFE">
    <uv-image :src="picture" width="340rpx" height="240rpx" :observe-lazy-load="true">
      <template #loading>
        <uv-loading-icon color="#666666" />
      </template>
    </uv-image>
    <view class="px-16rpx py-20rpx">
      <view class="h-80rpx overflow-hidden text-ellipsis text-28rpx text-#333333 font-medium leading-40rpx">
        {{ title }}
      </view>
      <Spacer height="36" />
      <view class="h-30rpx overflow-hidden text-ellipsis text-24rpx text-#666666 leading-30rpx">
        {{ author }}
      </view>
      <Spacer height="12" />
      <view class="h-30rpx overflow-hidden text-ellipsis text-24rpx text-#666666 leading-30rpx">
        {{ createdAt }}
      </view>
    </view>
  </view>
</template>
